<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时实检测</title>
    {% include 'admin/common/header.html' %}
    <link rel="stylesheet" href="{{ url_for('static', filename='/admin/admin/css/other/console2.css') }}"/>
</head>
{#style="text-align: center;"#}
<body class="pear-container">
<style >
     tr{ list-style-type:none;}
     img{ border:none; max-width: 100%;}
     .map4{ width: 100%; height:4.3rem;  position: relative; left: -50%; top: 2%; margin-top: .2rem; z-index: 5;}
     .map1,.map2,.map3{ position:absolute;}
     .map1{ width:35%; z-index: 2;top:36.8%; left: 32.5%;  animation: myfirst2 15s infinite linear;}
     .map2{ width:33%; top:38.5%; left: 33.5%; z-index: 3; opacity: 0.2; animation: myfirst 10s infinite linear;}
     .map3{ width:30%; top:40%; left: 35%; z-index: 1;}
    @keyframes myfirst2
    {
    from {transform: rotate(0deg);}
    to {transform: rotate(359deg);}
   }
    @keyframes myfirst
   {
    from {transform: rotate(0deg);}
    to {transform: rotate(-359deg);}
   }
</style>

<div class="layui-card-body" style="overflow: hidden;background: url('/static/images/bgImage.png');height: auto;width: auto">

     <div class="layui-card-body stopBg" style="float: right;margin-top: 20px">
           <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" id="pauseBtn">停 止</button>
     </div>
     <div class="header" style="text-align: center; background: url('/static/images/first_title.png') no-repeat;height: 70px;width: 500px;margin-top: 10px;background-size: 100% 100%;margin: auto">
      <p style="text-align: center;font-size: 30px;color: white;padding-top:20px;font-weight: bold">训练实时监测</p>
    </div>


         <div class="layui-card-body" style="margin-top: 10px;width: 100%;height: 100%;border-radius: 10px;border:  1px #0174f5 solid;padding: 3px;box-sizing: border-box">
     <div class="layui-card" style="z-index:100;position:relative;float: left; width: 65%;margin-top: 10px;margin-left: 10px;background-color: rgba(255,255,255,0%);border-radius: 10px;border:  1px #0174f5 solid;padding: 3px;box-sizing: border-box" >
        <div class="layui-col-md12" style="margin: 2%;width: 96%">
                <div class="layui-card">
                    <div class="layui-card-header" >体征数据实时</div>
                    <div class="layui-card-body">
                        <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                            <div id="echarts-records" style="min-height:400px"></div>
                        </div>
                    </div>
                </div>
        </div>

        </div>
     <div class="layui-card" style="background-color: rgba(255,255,255,0%);float: right;width: 30%;margin-top: 10px;margin-right: 10px;border-radius: 10px;border:  1px #0174f5 solid;padding: 3px;box-sizing: border-box;position:relative;z-index:100" >
       <div class="layui-card-header" style="color: white">实时训练数据</div>
            <div class="layui-card-body">
                <table class="layui-table"lay-skin="line" style="background-color: rgba(255,255,255,0%);color: white">

                    <tbody>

                    <tr>
                        <th>属性</th>
                        <th>值</th>
                    </tr>
                    <tr>
                        <td>作训警员</td>
                        <td>{{ user_name }}</td>
                    </tr>

                    <tr>
                        <td>作训情景</td>
                        <td>{{ scene_name }}</td>
                    </tr>

                    <tr>
                        <td>训练项</td>
                        <td>{{ train_name }}</td>
                    </tr>
                    <tr>
                        <td>训练开始时间</td>
                        <td>{{ start_time }}</td>
                    </tr>
                    <tr>
                        <td>血氧</td>
                        <td>{{ Blood_oxygen }}%</td>
                    </tr>
                    <tr>
                        <td>血压</td>
                        <td>{{ blood_pressure }}mmHg</td>
                    </tr>
                    <tr>
                        <td>呼吸频率</td>
                        <td>{{ Respiratory_rate }}次/分钟</td>
                    </tr>
                    <tr>
                        <td>心率</td>
                        <td>{{ heart_rate }}次/分钟</td>
                    </tr>
                    <tr>
                        <td>体温</td>
                        <td>{{ temperature }}℃</td>
                    </tr>

                    </tbody>

                </table>

            </div>
        </div>
         <div class="layui-card" style="float: left; width: 98%;height:435px;margin-top: 10%;background-color: rgba(255,255,255,0%);border-radius: 10px;border:  1px #0174f5 solid;padding: 3px;box-sizing: border-box;position:relative;z-index:10" >


         <div  style="color: white">训练现场实时录制</div>
                    <div class="layui-card-body">
                        <div class="layui-col-md6">
                            <video width="98%" height="98%" controls autoplay>
                              <source src="http://localhost:8887/video.mp4" type="video/mp4">
                              <source src="movie.ogg" type="video/ogg">
                              <source src="movie.webm" type="video/webm">
                              您的浏览器不支持 video 属性。
                            </video>
                            <div style="color: white">1机位</div>
                        </div>
                        <div class="layui-col-md6">
                            <video width="98%" height="98%" controls autoplay>
                              <source src="http://localhost:8887/video.mp4" type="video/mp4">
                              <source src="movie.ogg" type="video/ogg">
                              <source src="movie.webm" type="video/webm">
                              您的浏览器不支持 video 属性。
                            </video>
                            <div style="color: white">2机位</div>
                        </div>
                    </div>


     </div>
{#     <div class="layui-card" style="float: left; width: 30%;height:130px;margin-top: 64%;margin-left: -30%;background-color: rgba(255,255,255,0%);border-radius: 10px;border:  1px #0174f5 solid;padding: 3px;box-sizing: border-box">#}
{##}
{#     </div>#}
     <div  class="map" style= "text-align: center; margin-top: 45%">
                    <div class="map1"><img src="/static/images/lbx.png"></div>
                    <div class="map2"><img src="/static/images/jt.png"></div>
                    <div class="map3"><img src="/static/images/map.png"></div>

         </div>
     </div>


</div>
{% include 'admin/common/footer.html' %}
<script src="/static/idata/js/jquery-3.3.1.min.js"></script>
<script src="{{ url_for('static', filename='/admin/component/layui/layui.js') }}"></script>
<script src="{{ url_for('static', filename='/admin/component/pear/pear.js') }}"></script>

<script>

     layui.use(['layer','slider','form','carousel','echarts', 'popup'], function () {
        var $ = layui.jquery;
            echarts = layui.echarts;
        let popup = layui.popup;

        var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
        var carousel = layui.carousel;

        var trainId = {{ trainId }}
        //建造实例
        carousel.render({
           elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,height:'45%'
            ,arrow: 'none' //始终显示箭头
            ,anim: 'updown' //切换动画方式
            ,autoplay: 'always'
            ,indicator:'none'
         });

        var fire_slider = layui.slider;//火灾大小控制
        var wind_slider = layui.slider;//风速控制
        var temp_slider = layui.slider;//温度控制
        var range_slider = layui.slider;//火势范围
        var check_click = layui.form;
        var build_exist='否',fire_size='0',wind_size='0',temp_control='0',fire_range='0';
        let reg = new RegExp(/^\d+$/);
        check_click.on('switch(switchChose)',function (data) {
            let x = data.elem.checked;//判断开关状态
            if (x == true){
                {#$('#build_exist').text('是');#}
                build_exist='是';
            }else {
                build_exist='否';
            }
        })
        //渲染
        fire_slider.render({
          elem: '#fireDegree'  //绑定元素
          ,change:function (value) {
               fire_size = value;
            }
        });
        wind_slider.render({
           elem: '#windSpeed'  //绑定元素
             ,change:function (value) {

               wind_size=value;
            }
        });
        temp_slider.render({
          elem: '#tempControl'  //绑定元素
         ,change:function (value) {
                temp_control=value;
            }
        });
        range_slider.render({
          elem: '#fireRange'  //火势范围
          ,change:function (value) {
                fire_range=value;
            }
        });
        //确认按钮的点击事件
         $(document).on('click',"#completeBtn",function () {

           let  evacuat_num_input=document.getElementById("evacuat_num");
           let  has_evacuat_num_input=document.getElementById("has_evacuat_num");
           let  decision_maker_num_input=document.getElementById("decision_maker_num");
           let  scheme_num_input=document.getElementById("scheme_num");
           let recognition_ratio_input=document.getElementById("recognition_ratio")
            if((!reg.test(evacuat_num_input.value))||(!reg.test(has_evacuat_num_input.value))
                ||(!reg.test(decision_maker_num_input.value))||
                (!reg.test(scheme_num_input.value))||
                (!reg.test(recognition_ratio_input.value))){
                alert("输入不规范,请输入默认值0");
                return false;
            }else {

              $('#evacuat_num_show').text(evacuat_num_input.value+'人');
              $('#has_evacuat_num_show').text(has_evacuat_num_input.value+'人');
              $('#decision_maker_num_show').text(decision_maker_num_input.value+'人');
              $('#scheme_num_show').text(scheme_num_input.value+'种');
              $('#recognition_ratio_show').text(recognition_ratio_input.value+'%')
              $('#fire_size').text(fire_size);
              $('#wind_size').text(wind_size+'次/分钟');
              $('#temp_control').text(temp_control+'℃');
              $('#fire_range').text(fire_range);
              $('#build_exist').text(build_exist);
              alert("设置成功")
            }

         })
         $(document).on('click',"#pauseBtn",function () {
             layer.open({
                content: '是否结束训练，确认则生成此次训练报告'
                ,btn: ['确 定']
                ,yes: function(){
                   layer.open({
                         type: 2,
                         title: '训练报告',
                         shade: 0.1,
                         area: ['100%', '100%'],
                         content: '/admin/scene_realtime/stop/' + trainId
                   })
<!--                   layer.open({-->
<!--                       type: 2,-->
<!--                       title: '展示详情',-->
<!--                       shade: 0.1,-->
<!--                       area: ['100%', '100%'],-->
<!--                       content: '/admin/scene_realtime/personal_details',-->
<!--                  })-->
                },cancel: function(){//右上角关闭回调
                },
                end: function(){
                }
            })

         })


         //折线
        let bgColor = "#fff";
        let color = [
            "#0090FF",
            "#36CE9E",
            "#FFC005",
            "#FF515A",
            "#8B5CFF",
            "#00CA69"
        ];
        let echartData = [
            {
                name: "{{time_now}}",
                Blood_oxy: {{ Blood_oxygen }},
                blood_pre: {{ blood_pressure }},
                Respiratoryrate: {{ Respiratory_rate }},
                heartrate: {{ heart_rate }},
                tem: {{ temperature }}

            },
        ];

        var xAxisData = echartData.map(v => v.name);
        //  ["1", "2", "3", "4", "5", "6", "7", "8"]
        var yAxisData1 = echartData.map(v => v.Blood_oxy);
        // [100, 138, 350, 173, 180, 150, 180, 230]
        var yAxisData2 = echartData.map(v => v.blood_pre);
        // [233, 233, 200, 180, 199, 233, 210, 180]
        var yAxisData3 = echartData.map(v => v.Respiratoryrate);
        var yAxisData4 = echartData.map(v => v.heartrate);
        var yAxisData5 = echartData.map(v => v.tem);

        const hexToRgba = (hex, opacity) => {
            let rgbaColor = "";
            let reg = /^#[\da-f]{6}$/i;
            if (reg.test(hex)) {
                rgbaColor =
                    `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
                        "0x" + hex.slice(3, 5)
                    )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
            }
            return rgbaColor;
        }

        option = {
            backgroundColor: bgColor,
            color: color,
            legend: {
                right: 10,
                top: 10
            },
            tooltip: {
                trigger: "axis",
                formatter: function (params) {
                    let html = '';
                    params.forEach(v => {
                        html +=
                            `<div style="color: #666;font-size: 14px;line-height: 24px">
					                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
					                ${v.seriesName}.${v.name}
					                <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
					                `;
                    })


                    return html
                },
                extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
                axisPointer: {
                    type: 'shadow',
                    shadowStyle: {
                        color: '#ffffff',
                        shadowColor: 'rgba(225,225,225,1)',
                        shadowBlur: 5
                    }
                }
            },
            grid: {
<!--                top: 30,-->
                left: 0,
<!--                width:80%,-->

                containLabel: true
            },
            xAxis: [{
                type: "category",
                boundaryGap: false,
                axisLabel: {
                    formatter: '{value}',
                    textStyle: {
                        color: "#333"
                    }
                },
                axisLine: {
                    margin:3,
                    lineStyle: {
                        color: "#D9D9D9"
                    }
                },
                data: xAxisData
            }],
            yAxis: [

            {
              type: 'value',
              name: '血压',
              min:90,
              max:140,
              position: 'left',
              alignTicks: true,
              axisLine: {
                show: true,
                lineStyle: {
                  color: color[1]
                }
              },
              axisLabel: {
                formatter: '{value}mmHg'
              }
            },
            {
              type: 'value',
              name: '血氧',
              min:94,
              max:100,
              position: 'left',
              offset: -50,
              alignTicks: true,
              axisLine: {
                show: true,
                lineStyle: {
                  color: color[0]
                }
              },
              axisLabel: {
                formatter: '{value}%'
              }
            },
            {
              type: 'value',
              name: '呼吸频率',
              min:16,
              max:30,
              position: 'left',
              offset: -100,
              alignTicks: true,
              axisLine: {
                show: true,
                lineStyle: {
                  color: color[2]
                }
              },
              axisLabel: {
                formatter: '{value}次/分'
              }
            },
            {
              type: 'value',
              name: '心率',
              min:50,
              max:90,
              position: 'right',
              alignTicks: true,
              axisLine: {
                show: true,
                lineStyle: {
                  color: color[3]
                }
              },
              axisLabel: {
                formatter: '{value}次/分'
              }
            },
            {
              type: 'value',
              name: '体温',
              min:36,
              max:37.2,
              position: 'right',
              offset: 50,
              alignTicks: true,
              axisLine: {
                show: true,
                lineStyle: {
                  color: color[4]
                }
              },
              axisLabel: {
                formatter: '{value}度'
              }
            }
            ],
            series: [{
                name: "血氧",
                type: "line",
                smooth: true,
                symbolSize: 8,
                zlevel: 3,
                lineStyle: {
                    normal: {
                        color: color[0],
                        shadowBlur: 3,
                        shadowColor: hexToRgba(color[0], 0.5),
                        shadowOffsetY: 8
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [{
                                offset: 0,
                                color: hexToRgba(color[0], 0.3)
                            },
                                {
                                    offset: 1,
                                    color: hexToRgba(color[0], 0.1)
                                }
                            ],
                            false
                        ),
                        shadowColor: hexToRgba(color[0], 0.1),
                        shadowBlur: 10
                    }
                },
                yAxisIndex: 1,
                data: yAxisData1
            },
            {
                name: '血压',
                type: "line",
                smooth: true,
                symbolSize: 8,
                zlevel: 3,
                lineStyle: {
                    normal: {
                        color: color[1],
                        shadowBlur: 3,
                        shadowColor: hexToRgba(color[1], 0.5),
                        shadowOffsetY: 8
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [{
                                offset: 0,
                                color: hexToRgba(color[1], 0.3)
                            },
                                {
                                    offset: 1,
                                    color: hexToRgba(color[1], 0.1)
                                }
                            ],
                            false
                        ),
                        shadowColor: hexToRgba(color[1], 0.1),
                        shadowBlur: 10
                    }
                },
                yAxisIndex: 0,
                data: yAxisData2
            },
            {
                name: '呼吸频率',
                type: "line",
                smooth: true,
                symbolSize: 8,
                zlevel: 3,
                lineStyle: {
                    normal: {
                        color: color[2],
                        shadowBlur: 3,
                        shadowColor: hexToRgba(color[2], 0.5),
                        shadowOffsetY: 8
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [{
                                offset: 0,
                                color: hexToRgba(color[2], 0.3)
                            },
                                {
                                    offset: 1,
                                    color: hexToRgba(color[2], 0.1)
                                }
                            ],
                            false
                        ),
                        shadowColor: hexToRgba(color[2], 0.1),
                        shadowBlur: 10
                    }
                },
                yAxisIndex: 2,
                data: yAxisData3
            },
            {
                name: '心率',
                type: "line",
                smooth: true,
                symbolSize: 8,
                zlevel: 3,
                lineStyle: {
                    normal: {
                        color: color[3],
                        shadowBlur: 3,
                        shadowColor: hexToRgba(color[3], 0.5),
                        shadowOffsetY: 8
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [{
                                offset: 0,
                                color: hexToRgba(color[3], 0.3)
                            },
                                {
                                    offset: 1,
                                    color: hexToRgba(color[3], 0.1)
                                }
                            ],
                            false
                        ),
                        shadowColor: hexToRgba(color[3], 0.1),
                        shadowBlur: 10
                    }
                },
                yAxisIndex: 3,
                data: yAxisData4
            },
            {
                name: '体温',
                type: "line",
                smooth: true,
                symbolSize: 8,
                zlevel: 3,
                lineStyle: {
                    normal: {
                        color: color[4],
                        shadowBlur: 3,
                        shadowColor: hexToRgba(color[4], 0.5),
                        shadowOffsetY: 8
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [{
                                offset: 0,
                                color: hexToRgba(color[4], 0.3)
                            },
                                {
                                    offset: 1,
                                    color: hexToRgba(color[4], 0.1)
                                }
                            ],
                            false
                        ),
                        shadowColor: hexToRgba(color[4], 0.1),
                        shadowBlur: 10
                    }
                },
                yAxisIndex: 4,
                data: yAxisData5
            }
            ]
        };

        echartsRecords.setOption(option);

        window.onresize = function () {
            echartsRecords.resize();
        };

        setInterval(ajaxPolling, 1000 * 2);

        function ajaxPolling() {
            $.ajax({
                url: "/admin/scene_realtime/polling2",
                success: function (data) {
                    echartData.push({
                        name: data.time_now,
                        Blood_oxy: data.Blood_oxygen,
                        blood_pre: data.blood_pressure,
                        Respiratoryrate: data.Respiratory_rate,
                        heartrate: data.heart_rate,
                        tem: data.temperature

                    });


                    if (echartData.length > 8) {
                        echartData.shift();
                    }


                    xAxisData = echartData.map(v => v.name);
                    yAxisData1 = echartData.map(v => v.Blood_oxy);
                    yAxisData2 = echartData.map(v => v.blood_pre);
                    yAxisData3 = echartData.map(v => v.Respiratoryrate);
                    yAxisData4 = echartData.map(v => v.heartrate);
                    yAxisData5 = echartData.map(v => v.tem);

                    option.xAxis[0].data = xAxisData;
                    option.series[0].data = yAxisData1;
                    option.series[1].data = yAxisData2;
                    option.series[2].data = yAxisData3;
                    option.series[3].data = yAxisData4;
                    option.series[4].data = yAxisData5;

                    echartsRecords.setOption(option);

                    $(function(){

<!--                        if (data.Blood_oxygen==0 || data.blood_pressure==0 || data.Respiratory_rate==0 || data.heart_rate==0 || data.temperature==0) {-->
<!--                            alert("无法连接到体征数据，请检查体征设备连接状况")-->
<!--                        }-->
<!--                        if (data.Blood_oxygen>100){-->
<!--                            alert("血氧浓度过高！请注意！！")-->
<!--                        }-->
<!--                        else if (data.Blood_oxygen<94){-->
<!--                            alert("血氧浓度过低！请注意！！")-->
<!--                        }-->
<!--                        if (data.blood_pressure>115){-->
<!--                            alert("血压过高！请注意！！")-->
<!--                        }-->
<!--                        else if (data.blood_pressure<90){-->
<!--                            alert("血压过低！请注意！！")-->
<!--                        }-->
<!--                        if (data.Respiratory_rate>26){-->
<!--                            alert("呼吸频率过高！请注意！！")-->
<!--                        }-->
<!--                        else if (data.Respiratory_rate<16){-->
<!--                            alert("呼吸频率过低！请注意！！")-->
<!--                        }-->
<!--                        if (data.heart_rate>180){-->
<!--                            alert("心率过高！请注意！！")-->
<!--                        }-->
<!--                        else if (data.heart_rate<30){-->
<!--                            alert("心率过低！请注意！！")-->
<!--                        }-->
<!--                        if (data.temperature>39.2){-->
<!--                            alert("体温过高！请注意！！")-->
<!--                        }-->
<!--                        else if (data.temperature<30){-->
<!--                            alert("体温过低！请注意！！")-->
<!--                        }-->

                    });

                    $("tbody > tr:nth-child(6) > td:nth-child(2)").text(data.Blood_oxygen+"%")
                    $("tbody > tr:nth-child(7) > td:nth-child(2)").text(data.blood_pressure+"mmHg");
                    $("tbody > tr:nth-child(8) > td:nth-child(2)").text(data.Respiratory_rate+"次/分钟");
                    $("tbody > tr:nth-child(9) > td:nth-child(2)").text(data.heart_rate+"次/分钟");
                    $("tbody > tr:nth-child(10) > td:nth-child(2)").text(data.temperature+"℃");

                },
                error: function (xhr, type, errorThrown) {
                    popup.failure("api错误");
                }
            })

        }

    });
</script>
</body>
</html>